import React, { Component } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// 导入样式
import '../assets/css/login.css';
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

class Login extends Component {
    render() {
        const onFinish = values => {
            console.log('Success:', values);
        };

        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };
        
        return (
            <div>
                <div className="login-bg"></div>
                <div className="login-wrap">
                    <div className="login-box">
                        <Form
                            name="basic"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                name="username"
                                rules={[{ required: true, message: '请输入登录账号' }]}
                            >
                                <Input placeholder="请输入登录账号" />
                            </Form.Item>

                            <Form.Item
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                name="password"
                                rules={[{ required: true, message: '请输入登录密码' }]}
                            >
                                <Input.Password placeholder="请输入登录密码" />
                            </Form.Item>

                            <Form.Item>
                                <Button block type="primary" htmlType="submit">
                                    立即登录
                            </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

export default Login;
